<template>
  <div class="login-box">
    <div class="content">
      <div class="header">
        <img class="logo" src="../assets/images/mlogo.png" alt="" />
        <h2 class="title">新蜂商城</h2>
      </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="账号" prop="name">
          <el-input
            placeholder="请输入手机号/用户名"
            v-model.trim="ruleForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model.trim="ruleForm.password"></el-input>
        </el-form-item>
        <p class="tip">
          登录表示您已同意
          <a href="javascript:;">《服务条款》</a>
        </p>
        <el-form-item>
          <el-button type="primary" @click="submit" :loading="isSubmit"
            >立即登录</el-button
          >
        </el-form-item>
        <div class="remember">
          <el-checkbox v-model="checked">记住账号和密码</el-checkbox>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from "blueimp-md5";
import { store } from "@/assets/utils";
export default {
  name: "xf-login",
  data() {
    const validateName = (_, value, callback) => {
      let reg1 = /^(?:(?:\+|00)86)?1\d{10}$/,
        reg2 = /^[a-zA-Z0-9_-]{4,16}$/;
      if (value === "") {
        callback(new Error("账号不能为空"));
        return;
      }
      if (!reg1.test(value) && !reg2.test(value)) {
        callback(new Error("账号格式不正确~"));
        return;
      }
      callback();
    };
    const validatePassword = (_, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,16}$/;
      if (value.length === 0) {
        callback(new Error("密码不能为空"));
        return;
      }

      if (value !== "******" && !reg.test(value)) {
        callback(new Error("密码合适不正确（正确：4~16位数字/字母/下划线）"));
        return;
      }
      callback();
    };
    return {
      ruleForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
      checked: true,
      isSubmit: false,
    };
  },
  methods: {
    async submit() {
      //简易防抖
      //  if(this.$isSubmit) return;
      //  this.$isSubmit=true;
      this.isSubmit = true;
      try {
        await this.$refs["ruleForm"].validate();
        console.log("通过校验");
        let { name, password } = this.ruleForm;
        //处理是记住密码还是重新输入
        if (password === "******") {
          password = this.passwordMD5;
        } else {
          password = md5(password);
        }

        let { resultCode, data } = await this.$api.base.login(name, password);
        if (+resultCode !== 200) {
          this.$message.error("很遗憾，登录失败，请核实账号密码是否正确");
          this.isSubmit = false;
          return;
        }
        this.$message.success("恭喜您，登录成功");
        //储存跳转(或者目标页)
        localStorage.setItem("tk", data);
        let { target } = this.$route.query;
        if (!target) target = "./home";
        this.$router.push(target);
        // this.$router.push("/home");

        //记住账号与密码
        if (this.checked) {
          store.set("remember", {
            name,
            password,
          });
        } else {
          store.remove("remember");
        }
      } catch (_) {
        console.log(_);
      }
      // this.$isSubmit=false;
      this.isSubmit = false;
    },
  },
  created() {
    //如果有记住密码，放在框里
    let data = store.get("remember");
    if (data) {
      this.ruleForm = {
        name: data.name,
        password: "******",
      };
      this.passwordMD5 = data.password;
    }
  },
};
</script>

<style lang="less" scoped>
.login-box {
  position: relative;
  height: 100%;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 420px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2);
  }
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;

  .logo {
    margin-right: 20px;
    width: 100px;
    height: 100px;
  }

  .title {
    font-size: 28px;
    color: #1baeae;
    font-weight: 700;
  }
}

.el-form {
  box-sizing: border-box;
  margin: 0 auto;
  padding-bottom: 40px;
  width: 300px;

  /deep/.el-form-item__label {
    display: block;
  }

  .tip {
    line-height: 40px;
    font-size: 14px;

    a {
      color: #409eff;
    }
  }

  .el-button {
    width: 100%;
  }
}
</style>